<template>
	<view class="invite">
		<view v-if="mypiduserinfo" class="title">
			我的推荐人
		</view>
		<view class="dataList">
			<view v-if="mypiduserinfo" class="dataitem">
				<image v-if="mypiduserinfo.avatar == null" src="@/static/image/avatar.jpg" mode=""
					style="width: 80rpx; height: 80rpx;border-radius: 80rpx;"></image>
				<image v-else :src="mypiduserinfo.avatar" mode=""
					style="width: 80rpx; height: 80rpx;border-radius: 80rpx;"></image>
				<view class="" style="margin-left: 28rpx;">
					{{mypiduserinfo.nickname}}
				</view>
			</view>
		</view>

		<view class="title">
			我的邀请：{{user_invite.length}}人
		</view>
		<view v-if="user_invite.length" class="dataList">
			<view class="dataitem" v-for="(item,index) in user_invite">
				<image v-if="item.avatar == null" src="@/static/image/avatar.jpg" mode=""
					style="width: 80rpx; height: 80rpx;border-radius: 80rpx;"></image>
				<image v-else :src="item.avatar" mode="" style="width: 80rpx; height: 80rpx;border-radius: 80rpx;">
				</image>
				<view class="" style="margin-left: 28rpx;">
					{{item.nickname}}
				</view>
			</view>
		</view>
		<view v-else class="">
			<u-empty mode="data" text="暂无邀请人">
			</u-empty>
		</view>

		<view class="" style="height: 150rpx;"></view>

		<view class="bottomContent"  @click="show = true">
			<view class="btns">
				生成海报
			</view>
		</view>


		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="content">
				<image src="../../static/image/share.png" mode=""
					style="width: 690rpx;height: 668rpx; border-radius: 5px;"></image>
				<view class="ewm">
					<view class="left">
						<view class="title1">
							扫描二维码打开链接
						</view>
						<view class="text">
							邀请码
						</view>
						<view class="code">
							{{inviteCode}}
						</view>
					</view>

					<view class="bg">
                      <image src="../../static/image/logo.jpg" mode=""
                      	style="width: 100%;height: 100%; border-radius: 5px;"></image>
					</view>

				</view>

				<view class="btns" @click="saveImg">
					保存相册
				</view>
				<view class="" style="width:54rpx ;margin: 0 auto;">
					<image src="../../static/image/close.png" mode=""
						style="width: 54rpx;height: 54rpx;margin: 0 auto;margin-top: 49rpx;" @click="show = false">
					</image>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		userinfo
	} from "@/api/api.js"
	import {
		userauthority
	} from "@/api/api.js"
	export default {
		data() {
			return {
				show: false,
				mypiduserinfo: {},
				inviteCode: "",
				user_invite: [],
			}
		},
		onLoad() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			this.handleuserauthority()
			this.handleGetuserinfo()
		},
		methods: {
			async handleuserauthority() {
				let res = await userauthority()
				this.mypiduserinfo = res.data.piduserinfo
				this.user_invite = res.data.user_invite
				console.log("我的权限", res)

			},
			async handleGetuserinfo() {
				let res = await userinfo()
				this.inviteCode = res.data.invite_code

				console.log("邀请码", this.inviteCode)
			},
			saveImg() {
				this.capture()
				setTimeout(() => {
					uni.saveImageToPhotosAlbum({
						filePath: this.ppt,
						success: function() {
							console.log('save success');
							uni.showToast({
								title: '保存图片成功',
								duration: 2000
							});
						},
						fail(e) {
							console.log(e);
							uni.showToast({
								title: '保存图片失败',
								duration: 2000
							});
						}
					});
				}, 300)
			},
			capture: function(scene) {
				let _this = this;
				// #ifdef MP-WEIXIN
				//uni.showShareMenu();
				// #endif
				// #ifdef APP-PLUS
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let bitmap = null;
				let currentWebview = page.$getAppWebview();
				bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中  
				currentWebview.draw(bitmap, function() {
					console.log('截屏绘制图片成功');
					// bitmap.save( "_doc/"+Math.random()+".jpg"
					bitmap.save("_doc/invite.jpg", {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								_this.path = i.target
								bitmap.clear(); //销毁Bitmap图片  

								_this.ppt = i.target

								console.log(_this.ppt);
							}
						});
					}, function(e) {
						console.log('保存图片失败：' + JSON.stringify(e));
					});
				}, function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				});
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 690rpx;
		height: 1130rpx;

		.ewm {
			width: 100%;
			height: 224rpx;
			background-color: #000000;
			margin-top: -8rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				text-align: left;

				.title1 {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #6DF8FF;
					line-height: 34rpx;
				}

				.text {
					font-size: 40rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 400;
					color: #6DF8FF;
					line-height: 40rpx;
					margin: 40rpx 0;
				}

				.code {
					font-size: 20rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 400;
					color: #6DF8FF;
					line-height: 46rpx;
					width: 216rpx;
					height: 46rpx;
					border-radius: 2rpx 2rpx 2rpx 2rpx;
					opacity: 1;
					border: 2rpx solid #6DF8FF;
					text-align: center;
				}
			}

			.bg {
				width: 200rpx;
				height: 200rpx;
				background: #929292;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
		}

		.btns {
			width: 374rpx;
			height: 72rpx;
			background: #04767C;
			border-radius: 512rpx 512rpx 512rpx 512rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 44rpx;
		}
	}

	.invite {
		width: 100%;
		box-sizing: border-box;

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.dataList {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 14rpx;

			.dataitem {
				width: 100%;
				height: 130rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				box-sizing: border-box;
				margin-bottom: 16rpx;
			}
		}

		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 26rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);

			.btns {
				width: 542rpx;
				height: 80rpx;
				background: #04767C;
				border-radius: 512rpx 512rpx 512rpx 512rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				margin: 0 auto;
			}
		}
	}
</style>